import React, { useRef, useState } from 'react'
import { connect } from 'react-redux'
import { Button, Select, Space } from 'antd'
import {
  incrementAction,
  decrementAction,
  incrementAsyncAction,
} from '../../redux/actions/count'

function Count(props) {
  // const myRef = useRef()
  const [count, setCount] = useState(1)
  function increment() {
    // const { value } = myRef.current
    // props.incrementAction(+value)
    props.incrementAction(count)
  }
  function decrement() {
    // const { value } = myRef.current
    // props.decrementAction(+value)
    props.decrementAction(count)
  }
  function incrementIfOdd() {
    // const { value } = myRef.current
    if (props.count % 2 === 1) {
      // props.incrementAction(+value)
      props.incrementAction(count)
    }
  }
  function incrementAsync() {
    // const { value } = myRef.current
    // props.incrementAsyncAction(+value, 500)
    props.incrementAsyncAction(count, 500)
  }
  function handleChange(val) {
    setCount(val)
  }

  return (
    <div>
      <h1>这是Count组件</h1>
      <h2>Person组件人数为：{props.personCount}</h2>
      <h2>当前组件求和为：{props.count}</h2>
      <Space size={12}>
        <Select
          defaultValue={count}
          style={{ width: 120 }}
          options={[
            {
              value: 1,
              label: 1,
            },
            {
              value: 2,
              label: 2,
            },
            {
              value: 3,
              label: 3,
            },
          ]}
          onChange={handleChange}
        ></Select>
        {/*<select ref={myRef}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>*/}
        <Button type="primary" onClick={increment}>
          加
        </Button>
        <Button type="primary" ghost onClick={decrement}>
          减
        </Button>
        <Button type="dashed" onClick={incrementIfOdd}>
          奇数加
        </Button>
        <Button type="primary" danger onClick={incrementAsync}>
          异步加
        </Button>
      </Space>
    </div>
  )
}

export default connect(
  (state) => ({
    count: state.count,
    personCount: state.person.length,
  }),
  {
    incrementAction,
    decrementAction,
    incrementAsyncAction,
  }
)(Count)
